<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入vue的js-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--    引入elementui的js 前必须引入vue的js-->
    <script type="text/javascript" src="js/index.js"></script>
    <!--    引入anxios的js-->
    <script type="text/javascript" src="js/axios.min.js"></script>

    <!--    引入elementui的css样式-->
    <link  type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="aaa">

    <el-form :inline="true" :model="studentSearchForm" class="demo-form-inline">
        <el-form-item label="学生姓名">
            <el-input v-model="studentSearchForm.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="studentSearchForm.age" placeholder="学生年龄"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="initTable" round>搜索</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium"  @click="add" round>添加</el-button>
            <el-button type="danger"  size="medium"  @click="batchDelete()" round>批量删除</el-button>
        </el-form-item>
    </el-form>
    <!--    :data 引入vue中的变量tableData必须为数组类型-->
    <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
    >
        <!--     el-table-column  表格中的列  prop: 表示表中的列的属性名  tableData中的属性名   -->
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="sid"
                label="学生id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="学生姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="100">
        </el-table-column>

        <el-table-column
                prop="aclass.cname"
                label="班级名称"
                width="100">
        </el-table-column>
        <el-table-column
                algin="center"
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" size="medium" round @click="edits(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="medium" round @click="del(scope.row)">删除</el-button>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--    //修改学生信息对话框-->
    <el-dialog
            title="修改学生信息"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="editStudentForm" label-width="80px" >
            <el-form-item label="学生id">
                <el-input v-model="editStudentForm.sid"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="editStudentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editStudentForm.age"></el-input>
            </el-form-item>

            <el-form-item label="班级名称">
                <el-select v-model="editStudentForm.ccid" placeholder="请选择">
                    <el-option v-for="item in classes"
                               :key="item.cid"
                               :label="item.cname"
                               :value="item.cid">
                    </el-option>

                </el-select>
                </el-select>
            </el-form-item>

        </el-form>

        <el-button type="primary" @click="updateStudent()" round>确认修改</el-button>
        <el-button @click="dialogVisible = false" round>取消</el-button>
        </span>
    </el-dialog>

    <el-dialog
            title="添加学生信息"
            :visible.sync="dialogVisible2"
            width="30%"
    >

        <el-form ref="form" :model="addStudentForm" label-width="80px" >

            <el-form-item label="姓名">
                <el-input v-model="addStudentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="addStudentForm.age"></el-input>
            </el-form-item>
            <el-form-item label="班级id">
                <el-select v-model="addStudentForm.ccid" placeholder="请选择">
                    <el-option v-for="item in classes"
                               :key="item.cid"
                               :label="item.cid"
                               :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

        <el-button type="primary"  @click="addStudent" round >确认添加</el-button>
        <el-button @click="dialogVisible2 = false" round>取消</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script>
    var app = new Vue({
        el:"#aaa",
        data:{
            //编辑对话框的显示与隐藏  true为显示 false为隐藏
            dialogVisible:false,
            dialogVisible2:false,
            tableData: [],
            //搜索表单对象
            studentSearchForm:{},
            //编辑表单对象
            edit:[],
            editStudentForm:[],
            //添加学生信息
            addStudentForm:{},
            currentPage:1,
            pageSize:5,
            total:0,
            //班级信息
            classes:[],
            //复选框id
            //表格选中项
            multipleElection:[],
            //ids:[],
        },
        //页面加载完之后执行此方法
        created(){
            this.initTable();
            //查询班级
            this.loadAll();
        },
        methods:{
            //获取表格选中的项
            handleSelectionChange(val){
                this.multipleElection=val;
            }
            ,
            //批量删除学生信息
            batchDelete(){
                this.ids=this.multipleElection.map(item=>item.sid);
                axios.post("http://localhost:8080/student/deleteIds/"+this.ids).then(result=>{
                    if(result.data.code==200){
                        this.initTable();
                        this.$message.success("删除成功");

                    }
                })
            },
            //班级信息
            loadAll(){
                axios.get("http://localhost:8080/class/find").then(result=>{
                    this.classes=result.data.data;
                })
            },
            initTable(){
                axios.post("http://localhost:8080/student/get/"+this.currentPage+"/"+this.pageSize,this.studentSearchForm).then(result=>{
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            //删除学生信息
            del(row){
                var sid = row.sid;
                console.log(sid)
                axios.delete("http://localhost:8080/student/delete/"+sid).then(result=>{
                    if(result.data.code==200){
                        this.initTable();//重新加载数据
                        this.$message.success("删除成功")//弹出成功消息

                    }
                })
            },
            //改变每页的条数时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            //改变当前页码时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            //编辑员工信息
            edits(row){
                this.dialogVisible=true;
                this.editStudentForm=row;
            },
            //修改学生信息
            updateStudent(){
                axios.put("http://localhost:8080/student/update",this.editStudentForm).then(result=>{
                    if(result.data.code==200){
                        this.$message.success("修改成功");
                        //刷新页面
                        this.initTable();
                        //关闭对话框
                        this.dialogVisible=false;

                    }
                })

            },
            add(){
                this.dialogVisible2=true;
            },
            //添加学生信息
            addStudent(){
                axios.post("http://localhost:8080/student/insert",this.addStudentForm).then(result=>{
                    if(result.data.code==200){
                        //刷新页面
                        this.initTable();
                        this.$message.success("添加成功");

                        //关闭对话框
                        this.dialogVisible2=false;

                    }
                })


            }

        }
    })
</script>
</html>